<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>用户名:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="userName" placeholder="请输入"></el-input>
          </div>
        </el-col>
      </el-row>

      <p/>
      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>真实姓名:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-input v-model="realName" placeholder="请输入"></el-input>
          </div>
        </el-col>
      </el-row>
      <p/>

      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>拥有角色:</span>
          </div>
        </el-col>
        <el-col>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
          </el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="(city,index) in cities" :label="city.roleId" :key="index">{{ city.roleName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <p/>

      <el-row>
        <el-col :span="5" class="labClass">
          <div class="grid-content bg-purple">
            <span>拥有权限:</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <span v-for="item in this.havePower" style="margin-left: 5px">{{ item }}</span>
          </div>
        </el-col>
      </el-row>
      <p/>


      <el-button type="success" @click="add">添加</el-button>


    </el-card>

  </div>
</template>

<script>
export default {

  name: "addUser",
  data() {
    return {
      userName: '',
      realName: '',

      //初始化的数组
      cityOptions: [],
      //默认全选框是否被选中
      checkAll: false,
      //默认会选中的按钮，选中是按label里的值来判定的
      checkedCities: [],
      //初始化所有框体
      cities: this.cityOptions,
      isIndeterminate: false,
      //记录所有label的值，用于全选框判定是否全选
      roleIdArray: [],

      havePower: [],

      havenRoleId:[],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$axios.get('drp/role/findAll').then(
          r => {
            if (r.data != '') {
              this.cities = r.data
              console.log(r.data)
              for (let i = 0; i < r.data.length; i++) {
                this.cityOptions.push(r.data[i].roleName)
                this.roleIdArray.push(r.data[i].roleId)
              }
            }
          }
      )
    },
    add() {
      let formData=new FormData()
      formData.append("userName",this.userName)
      formData.append("realName",this.realName)
      formData.append("roleIdArray",this.havenRoleId)
      this.$axios.post('drp/user/addUser',formData).then(
          r=>{
            if (r.data=='ok'){
              alert('添加成功，默认密码为lovo')
              location.href='/index'
            }
          }
      )
    },
    handleCheckAllChange(val) {
      let power=[]
      this.havePower = []
      this.checkedCities = val ? this.roleIdArray : [];
      this.havenRoleId=this.roleIdArray
      this.isIndeterminate = false;

      for (let i = 0; i < this.checkedCities.length; i++) {
        let params = {
          roleId: this.checkedCities[i]
        }
        this.$axios.get('drp/role/findById', {params: params}).then(
            r => {
              let powerList = r.data.powerBeanList
              for (let y = 0; y < powerList.length; y++) {
                power.push(powerList[y].function)
              }
              for (let i=0;i<power.length;i++){
                if (this.havePower.indexOf(power[i])===-1){
                  this.havePower.push(power[i])
                }
              }
            }
        )
      }
    },
    handleCheckedCitiesChange(value) {
      this.havenRoleId=value
      let power=[]
      this.havePower = []
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      for (let i = 0; i < value.length; i++) {
        let params = {
          roleId: value[i]
        }
        this.$axios.get('drp/role/findById', {params: params}).then(
            r => {
              let powerList = r.data.powerBeanList
              for (let y = 0; y < powerList.length; y++) {
                power.push(powerList[y].function)
              }
              for (let i=0;i<power.length;i++){
                if (this.havePower.indexOf(power[i])===-1){
                  this.havePower.push(power[i])
                }
              }
            }
        )
      }
    }
  }
}
</script>

<style scoped>

</style>